<template>
	<view class="hourse-page">
		<view class="tabs-box">
			<u-tabs
				:list="tabList"
				:current="tabCurrent"
				active-color="#348afc"
				inactive-color="#333333"
				bg-color="transparent"
				@change="tabChange"
			></u-tabs>
		</view>
		<view class="list">
			<view class="item" v-for="(item, index) in houseList" :key="index" @click="goDetail(item.id,item.title)">
				<image :src="item.imgs_path[0]" alt="" />
				<template v-if="item.type === 4">
					<view class="title2">{{ item.title }}</view>
					<view class="color-999 fs22 truncate-2">{{ item.content }}</view>
				</template>

				<template v-else>
					<view class="bottom">
						<view class="top">
							<text class="status" v-if="item.status === 3"
								style="'background: linear-gradient(91deg, #fea877 1%, #ff7969 99%);'">{{
									$t(item.status) |
									filterStatus }}
							</text>
							<text class="status" v-else-if="item.status === 5"
								style="'background: linear-gradient(91deg, #e1dfdf 1%, #b9b6b6 99%);'">{{
									$t(item.status) |
									filterStatus }}
							</text>
							<text class="status" v-else
								style="'background: linear-gradient(91deg, #70bdfe 1%, #4490ff 99%);'">{{
									$t(item.status) |
									filterStatus }}
							</text>
							<text class="title">{{ item.title }}</text>
						</view>

						<view class="info">{{ item.show_str }}</view>
						<view class="price">
							<text class="about" v-if='item.type == 1'>{{ $t("约") }}</text>
							<text class="num">{{ item.price }}</text>
							<text class="units">
								<text class="m" v-if='item.type == 0'>{{ $t("元") }}/m²</text>
								<text v-else-if='item.type == 1' class="moon">{{ $t("万") }}</text>
								<text v-else-if='item.type == 2' class="moon">{{ $t("元") }}/m²</text>
								<text v-else-if='item.type == 3'
									class="moon">{{ item.price_unit ? $t(item.price_unit): $t("元/月") }}</text>
							</text>
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		makePhoneCall
	} from '@/common/utils/index';
	import $config from '@/api/http.baseUrl.js'
	export default {
		data() {
			return {
				tabCurrent: 0,
				
				houseList: [],
				// 下拉状态
				status: 'loadmore',
				sort: {
					page_size: 10, //每页数量
					page: 1, //当前页数,
					search_type: 0,
					city_name: '',
					area_code: '',
					id: 0,
				},
			}
		},
		onLoad() {
			this.getHouseList();
		},
		onShow() {
			// 更新tabbar多语言
			for (let tabbar = 0; tabbar < 3; tabbar++) {
				if (this.$t(`底部${tabbar+1}`).indexOf('底部') < 0) {
					uni.setTabBarItem({
						index: tabbar,
						text: this.$t(`底部${tabbar+1}`),
					})
		
				}
			}
		},
		onReachBottom() {
			if (this.sort.page < this.totalPages) {
				this.sort.page++;
				this.status = 'loading';
				this.getHouseList('more');
			} else {
				this.status = 'nomore';
			}
		},
		filters: {
			filterStatus(status) {
				if (status === 3) {
					return '在售';
				} else if (status === 5) {
					return '已售';
				} else {
					return '待售';
				}
			},
		},
		methods: {
			getHouseList(more) {
				this.$u.api.house_list(this.sort).then(res => {
					this.totalPages = res.data.data.last_page;
					if (more == 'more') {
						this.houseList = [...this.houseList, ...res.data.data.data];
					} else {
						this.houseList = res.data.data.data
					}
				});
			},
			goDetail(id,name){
				uni.navigateTo({
					url:'/pages/mine/houseDetail?id='+id+'&name='+name
				})
			},
			tabChange (index) {
				this.tabCurrent = index
				this.sort.page=1;
				this.sort.id=index;
				this.status = 'loading';
				this.houseList = [];
				this.getHouseList();
			},
		},
		computed: {
			tabList () {
				return [{
					name: this.$t('全部'),
					label: '全部',
				}, {
					name: this.$t('二手房'),
					label: '二手房',
				}, {
					name: this.$t('新房'),
					label: '新房',
				}, {
					name: this.$t('租房'),
					label: '租房',
				}]
			}
		}
	}
</script>

<style lang="scss">
	.hourse-page {
		box-sizing: border-box;
		min-height: 100vh;
		background-color: #f8f8f8;
		
		.tabs-box {
			position: sticky;
			top: var(--window-top);
			left: 0;
			right: 0;
			z-index: 10;
			background-color: #fff;
		}
		
		.list {
			padding: 24rpx 32rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.item {
			margin: 6rpx 0;
			padding: 10rpx;
			border-radius: 20rpx;
			border: 6rpx solid #f4f3f3;
			width: 332rpx;
			background-color: #fff;

			image {
				border-radius: 20rpx;
				width: 302rpx;
				height: 296rpx;
			}

			.bottom {
				padding: 16rpx 10rpx 20rpx;

				.top {
					line-height: 40rpx;
					@include text-overflow;

					.status {
						display: inline-block;
						margin-right: 10rpx;
						color: #fff;
						font-size: 26rpx;
						padding: 0 10rpx;
						background: linear-gradient(91deg, #70BDFE 0%, #4490FF 100%);
						border-radius: 4rpx;
					}

					.title {
						color: $homeBlack;
						font-weight: bold;
					}
				}



				.info {
					padding: 20rpx 0;
					font-size: 23rpx;
					color: $homeGrey;
				}

				.price {
					font-size: 24rpx;
					color: $priceColor;

					.num,
					.about {
						font-weight: bold;
						font-size: 32rpx;
					}

					.about {
						margin-right: 10rpx;
					}
				}
			}
		}

		.title2 {
			margin: 20rpx 0;
			flex: 1;
			color: $homeBlack;
			font-weight: bold;
			@include text-overflow;
		}
	}
</style>